import React, { useState, useEffect } from 'react';
import { MiddleCountStyled } from './style';
import { toThousands } from '@/utils/tools/common';
import { BiOverviewDto } from '@/services/types';
import FlowReportItem from '../FlowReportItem';
import LinesReact from './line';
import MainBody from './mainBody';
import { getOverViewDto } from '@/services/index';
import icon1 from 'src/assets/jhdata/icon1.svg';
import icon2 from 'src/assets/jhdata/icon2.svg';
import icon3 from 'src/assets/jhdata/icon3.svg';
import icon4 from 'src/assets/jhdata/icon4.svg';
import MutiFonds from './mutiFonds';
import { useSelector } from 'react-redux';

type MiddleCountPropsType = {};

const MiddleCount: React.FC<MiddleCountPropsType> = (props) => {
  // const [curData, setCurData] = useState<BiOverviewDto>({
  //   archNum: 0,
  //   digitizationRate: 0,
  //   dossierNum: 0,
  //   electronicsArchNum: 0,
  //   entityArchNum: 0,
  //   fileTotalSize: 0,
  //   monthAddFileSizeNum: 0,
  //   sectNum: 0,
  //   totalArchNum: 0,
  //   yearAddArchNum: 0,
  //   yearAddFileSizeNum: 0,
  // });

  const [overviewDto, setOverviewDto] = useState<BiOverviewDto>({
    archTotal: 0,
    dossierTotal: 0,
    dossierArchTotal: 0,
    borrowTatal: 0,
    handOverTatal: 0,
    receiveTatal: 0,
    collectTatal: 0,
    electronicBorrowTotal: 0,
    entityArchTotal: 0,
    entityBorrowTotal: 0,
    destroyTotal: 0,
    longSaveTotal: 0,
    editAndResearchTotal: 0,
  });

  const fondName = useSelector((state: any) => state.mutifonds.fondName);

  useEffect(() => {
    getOverViewDto().then((res: BiOverviewDto) => {
      setOverviewDto(res);
    });
  }, [fondName]);
  useEffect(() => {
    // props.data && setCurData(props.data);
  }, [overviewDto]);
  return (
    <MiddleCountStyled>
      <div style={{ height: '45vh' }}>
        <MutiFonds />
        <div className='middle-count'>
          <div className='count-left'>
            <div className='left-top'>
              <div className='left-item1 left-item'>
                <div className='item-text'>
                  <div className='item-words'>
                    <div>馆藏总文件量</div>
                  </div>
                  {/* <div className='item-0'>{toThousands(overviewDto?.archTotal)}</div> */}
                  <div className='item-number-text'>
                    <div className='item-0'>{toThousands(overviewDto?.archTotal)}</div>
                    <div className='item-1'>件</div>
                  </div>
                </div>
                <div className='item-icon'>
                  <img src={icon4}></img>
                </div>
              </div>
              <div className='left-item2 left-item'>
                <div className='item-text'>
                  <div className='item-words'>
                    <div>馆藏总案卷量</div>
                  </div>
                  {/* <div className='item-0'>{toThousands(overviewDto.dossierTotal)}1115</div> */}
                  <div className='item-number-text'>
                    <div className='item-0'>{toThousands(overviewDto.dossierTotal)}</div>
                    <div className='item-1'>卷</div>
                  </div>
                </div>
                <div className='item-icon'>
                  <img src={icon1}></img>
                </div>
              </div>
              <div className='left-item3 left-item'>
                <div className='item-text'>
                  <div className='item-words'>
                    <div>馆藏总卷内量</div>
                  </div>
                  {/* <div className='item-0'>{toThousands(overviewDto.dossierArchTotal)}</div> */}
                  <div className='item-number-text'>
                    <div className='item-0'>{toThousands(overviewDto.dossierArchTotal)}</div>
                    <div className='item-1'>卷内</div>
                  </div>
                </div>
                <div className='item-icon'>
                  <img src={icon2}></img>
                </div>
              </div>
              <div className='left-item4 left-item'>
                <div className='item-text'>
                  <div className='item-words'>
                    <div>查询利用</div>
                  </div>
                  {/* <div className='item-0'>{toThousands(overviewDto.borrowTatal)}</div> */}
                  <div className='item-number-text'>
                    <div className='item-0'>{toThousands(overviewDto.borrowTatal)}</div>
                    <div className='item-1'>人次</div>
                  </div>
                </div>
                <div className='item-icon'>
                  <img src={icon3}></img>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', width: '100%', margin: ' auto' }}>
          <div className='mainHeader' style={{ position: 'relative' }}>
            <div className='top1' style={{ position: 'relative' }}>
              <FlowReportItem title='电子利用' data={`${toThousands(overviewDto.collectTatal)}`}></FlowReportItem>
              <div className='top-line-row'>
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div>
              <div className='top-line-col'>
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div>
            </div>
            <div className='top2' style={{ position: 'relative' }}>
              <FlowReportItem title='实体利用' data={`${toThousands(overviewDto.handOverTatal)}`}></FlowReportItem>
              <div className='top-line-row'>
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div>
              <div className='top-line-col'>
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div>
            </div>

            {/* <div style={{ position: 'absolute', width: '20%', height: '50%', right: '5%', bottom: '-120%' }}>
              
              <div className='collectRine'>
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div>
            </div> */}
          </div>

          <div className='mainBody' style={{ display: 'flex', position: 'relative' }}>
            <div>
              <div className='left1' style={{ position: 'relative' }}>
                <FlowReportItem
                  title='在线收集'
                  data={`${toThousands(overviewDto.electronicBorrowTotal)}`}
                ></FlowReportItem>
                <div className='dzly-line'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
              </div>
              <div className='left2' style={{ position: 'relative' }}>
                <FlowReportItem
                  title='人工著录'
                  data={`${toThousands(overviewDto.electronicBorrowTotal)}`}
                ></FlowReportItem>
                <div className='dzly-line'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
              </div>
            </div>
            <div>
              {/* <div
                style={{
                  transform: 'rotate(90deg)',
                  position: 'relative',
                }}
                className='mainBodyLine'
              >
                <LinesReact width='30px' isHaveArrow={true}></LinesReact>
              </div> */}
              <MainBody></MainBody>
            </div>
            <div>
              <div className='right1'>
                <FlowReportItem title='档案销毁' data={`${toThousands(overviewDto.entityArchTotal)}`}></FlowReportItem>
                <div className='right-line'>
                  <LinesReact width='100%' isHaveArrow={true}></LinesReact>
                </div>
              </div>
              <div className='right2'>
                <FlowReportItem title='档案移交' data={`${toThousands(overviewDto.entityArchTotal)}`}></FlowReportItem>
                <div className='right-line'>
                  <LinesReact width='100%' isHaveArrow={true}></LinesReact>
                </div>
              </div>
            </div>
          </div>
          <div className='mainfloot'>
            <div className='mainFlootCenter'>
              {/* <div
                style={{
                  width: '40%',
                  position: 'absolute',
                  right: '10%',
                }}
                className='mainFlootLine'
              >
                <LinesReact width='100%' isHaveArrow={true}></LinesReact>
              </div> */}
              {/* <div
                style={{
                  width: '40%',
                  position: 'absolute',
                  transform: 'rotate(180deg)',
                  left: '10%',
                }}
                className='mainFlootLine'
              >
                <LinesReact isHaveArrow={true} width='100%'></LinesReact>
              </div> */}

              <div className='bottom1' style={{position: 'relative'}}>
                {/* <div className='mainFlootLine1' style={{ transform: 'rotate(90deg)', marginTop: 20 }}>
                  <LinesReact width='40%' isHaveArrow={true}></LinesReact>
                </div> */}
                <FlowReportItem title='长期保存' data={`${toThousands(overviewDto.longSaveTotal)}`}></FlowReportItem>
                <div className='bottom-line-row'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
                <div className='bottom-line-col'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
              </div>
              <div className='bottom2' style={{position: 'relative'}}>
                {/* <div className='mainFlootLine1' style={{ transform: 'rotate(90deg)', marginTop: 20 }}>
                  <LinesReact width='40%' isHaveArrow={true}></LinesReact>
                </div> */}
                <FlowReportItem
                  title='档案编研'
                  data={`${toThousands(overviewDto.editAndResearchTotal)}`}
                ></FlowReportItem>
                <div className='bottom-line-row'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
                <div className='bottom-line-col'>
                  <LinesReact isHaveArrow={true} width='100%'></LinesReact>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MiddleCountStyled>
  );
};

export default MiddleCount;
